<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <div class="main">
            <el-row :gutter="20" v-loading="loading">
                <el-col :span="8">
            <div style="text-align: center;">
                 <el-avatar :size="200" :src="user.url"></el-avatar>
                 <div style="text-align: center;">
                 <el-button round @click="addVisible = true" >修改头像</el-button>
                </div>
            </div>
                </el-col>
                <el-col :span="16">
                        <div style="margin:10px auto">
                                <el-form label-width="120px" :model="user" >
                                    <el-form-item label="昵称" >
                                    <el-input style="width:300px" size="small" v-model="user.username" auto-complete="off" placeholder="请输入部门名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话" >
                                        <el-input style="width:300px" size="small" v-model="user.tel" auto-complete="off" placeholder="请输入部门代码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="证件号" >
                                        <el-input style="width:300px" size="small" v-model="user.idCard" auto-complete="off" placeholder="请输入部门代码"></el-input>
                                    </el-form-item>
                                    <el-form-item v-if="user.rid == 3" label="车牌号" >
                                        <el-input style="width:300px" disabled size="small" v-model="user.carNum" auto-complete="off" placeholder="请输入部门代码"></el-input>
                                    </el-form-item>
                                    <el-form-item v-if="user.rid == 3" label="教学科目" >
                                        <el-input style="width:300px" disabled size="small" v-model="user.manSubject" auto-complete="off" placeholder="请输入部门代码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="科目"  v-if="user.rid == 2" >
                                        <el-input v-if="user.testStatus == '0'" disabled  style="width:300px" size="small" value="您已经通过了所有考试" auto-complete="off" placeholder="请输入部门代码"></el-input>
                                        <el-input disabled v-else style="width:300px" size="small" v-model="user.testStatus" auto-complete="off" placeholder="请输入部门代码"></el-input>
                                    </el-form-item>
                                    <div style="text-align: center;">
                                     <el-button @click="updateUser()" round type="primary">保存信息</el-button>
                                    </div>
                                </el-form>
                        </div>
                </el-col>
          </el-row>
        </div>

        <!--头像上传-->
        <el-dialog title="头像上传" :visible.sync="addVisible" width="30%">
                <el-upload
                class="upload-demo"
                ref="upload"
                action="http://localhost:8080/api/user/updateUrl"
                :on-success="uploadSuccess"
                :file-list="fileList"
                :limit="1"
                name="file"
                :data="level"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">一次只能上传一个jpg/png文件，且不超过500kb</div>
                </el-upload>
            
        </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
            user:"",
            fileList:[],
            level:{
                id:1
            },
            addVisible:false,
            loading:false
        }
    },
    created(){
        this.user = JSON.parse(window.sessionStorage.getItem("user"));
        this.level.id=this.user.id;
       
    },
    methods: {
      submitUpload() { //上传
        this.$confirm('确定要修改头像吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$refs.upload.submit();
        })
      },
      uploadSuccess(response, file, fileList){     //图片上传
            if(response.code == 200){
                this.$message.success('上传成功');
                this.fileList = []
                this.addVisible =false
                this.findUser();
            }else{
                this.$message.error('上传失败');
            }
       },
       findUser(){
           this.$api.get("/user/token/findUserByid",'',Response=>{
              
                     if(Response.data.code == 200){
                          this.user = Response.data.data;
                          window.sessionStorage.setItem("user",JSON.stringify(Response.data.data));
                          window.location.reload();
                     }
           })
       },
       updateUser(){
           this.loading = true,
           setTimeout(()=>{
               this.loading =false
           },500)
           this.$api.post("/user/token/updateUserByid",this.user,Response=>{
                     if(Response.data.code == 200){
                          this.$message.success(Response.data.data);
                          setTimeout(()=>{
                              this.findUser();
                          },1500)
                     }
           })
       }  
    },
    
}
</script>
<style scoped>
.main{
    margin: 20px auto;
    width: 800px;
    height: 500px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>